<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .score-case {
        width: 1000px;
        margin: 50px auto;
        display: flex;
      }

      .score-case .table {
        flex: 4;
      }

      .score-case .table table {
        width: 100%;
        border-spacing: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }

      .score-case .table table th {
        background: #f5f5f5;
      }

      .score-case .table table tr:hover td {
        background: #f5f5f5;
      }

      .score-case .table table td,
      .score-case .table table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
      }

      .score-case .table table td.red,
      .score-case .table table th.red {
        color: red;
      }

      .score-case .table .none {
        height: 100px;
        line-height: 100px;
        color: #999;
      }

      .score-case .form {
        flex: 1;
        padding: 20px;
      }

      .score-case .form .form-item {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
      }

      .score-case .form .form-item .label {
        width: 60px;
        text-align: right;
        font-size: 14px;
      }

      .score-case .form .form-item .input {
        flex: 1;
      }

      .score-case .form .form-item input,
      .score-case .form .form-item select {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
      }

      .score-case .form .form-item input::placeholder {
        color: #666;
      }

      .score-case .form .form-item .cancel,
      .score-case .form .form-item .submit {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 10px;
        margin-right: 10px;
        font-size: 12px;
        background: #ccc;
      }

      .score-case .form .form-item .submit {
        border-color: #069;
        background: #069;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="score-case">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th><input type="checkbox" v-model="isAll"/></th>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>考试时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <!-- <tbody v-if="list.length > 0"> -->
            <tbody v-if="list.length">
              <tr v-for="(item, index) in list">
                <td><input type="checkbox" v-model="item.isSelect"/></td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.subject }}</td>
                <td :class="{red: item.score < 60}">{{ item.score }}</td>
                <td>{{ formatTime(item.date) }}</td>
                <td><a @click.prevent="del(index)" href="#">删除</a></td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="6">
                  <span class="none">暂无数据</span>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="6">
                  <span>总分：{{ total }}</span>
                  <span style="margin-left:50px">平均分：{{ avgScore.toFixed(2) }}</span>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="form">
          <div class="form-item">
            <div class="label">科目：</div>
            <div class="input">
              <input v-model.trim="subject" type="text" placeholder="请输入科目" />
            </div>
          </div>
          <div class="form-item">
            <div class="label">分数：</div>
            <div class="input">
              <input v-model.number.trim="score" type="text" placeholder="请输入分数" />
            </div>
          </div>
          <div class="form-item">
            <div class="label"></div>
            <div class="input">
              <button @click="add" class="submit">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="./vue.js"></script>
    <script src="./dayjs.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            list: [
              {
                id: 15,
                subject: '语文',
                score: 89,
                date: new Date('2022/06/07 10:00:00'),
                isSelect: false
              },
              {
                id: 27,
                subject: '数学',
                score: 100,
                date: new Date('2022/06/07 15:00:00'),
                isSelect: false
              },
              {
                id: 32,
                subject: '英语',
                score: 56,
                date: new Date('2022/06/08 10:00:00'),
                isSelect: false
              },
              {
                id: 41,
                subject: '物理',
                score: 76,
                date: new Date('2022/06/08 10:00:00'),
                isSelect: false
              }
            ],
            // 绑定学科
            subject: '',
            // 绑定成绩
            score: ''
          }
        },
        methods: {
          // 在很久很久以前，其实是用一个叫“过滤器”的东西实现的
          // 后面作者发现“过滤器”这个东西很多余，所以在vue3里删掉了
          formatTime (date) {
            return dayjs(date).format('YYYY-MM-DD')
          },
          del (index) {
            // 根据下标删除即可
            this.list.splice(index, 1)
          },

          // 添加的点击事件
          add () {
            // 非空判断
            if (this.subject === '' || this.score === '') {
                return alert('请输入完整内容')
            }
            // 能来到这代表都有内容，就应该把内容加到数组里
            this.list.push({
              // id为了不重复，用了时间戳
              id: Date.now(),
              // 输入的学科
              subject: this.subject,
              // 输入的成绩
              score: this.score,
              // 添加时间就用当前时间即可
              date: new Date(),
              // 将来用来做勾选的，先都给false，代表都没勾选
              isSelect: false,
            })
            // 加完后把输入内容清空
            this.subject = this.score = ''
          }
        },

        computed: {
          // 总分
          total () {
            // // 先准备一个求和变量
            // let sum = 0
            // // 遍历
            // this.list.forEach(v => {
            //   sum += v.score
            // })
            // // 循环完了，sum就有所有的和
            // return sum

            return this.list.reduce((sum, v) => sum += v.score, 0)
          },
          avgScore () {
            if (this.list.length === 0) return 0
            return this.total / this.list.length
          },

          isAll: {
            get () {
              // 用every
              return this.list.every(v => v.isSelect)
            },

            set (val) {
              this.list.forEach(v => v.isSelect = val)
            }
          }
        }
      })
    </script>
  </body>
</html>
